<template>
  <div class="singer">
    <ul class="singer-header">
      <li v-for="(item,index) in correctState" :key="index" @click="handleChangeView(item)"
          :class="{active:item.name==activeName}">
        {{item.name}}
      </li>
    </ul>
    <div>
      <content-list :contentList="data"></content-list>
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange" background layout="total,prev,pager,next"
                       :current-page="currentPage" :page-size="pageSize" :total="albumDatas.length">
        </el-pagination>
      </div>
    </div>

  </div>
</template>
<script>
  import ContentList from '../components/ContentList';
  import {getModifiedDetailsOfNum} from '../api/index';
  import {mixin} from "../mixins";
  import {correctState} from '../assets/data/correctState';
  import {mapGetters} from 'vuex';

  export default {
    name: 'correct',
    components: {
      ContentList
    },
    data() {
      return {
        centerDialogVisible: false,
        albumDatas: [],      //记录数据
        pageSize: 15,        //页面大小，一页有15条数据
        currentPage: 1,      //当前页，默认第一页
        correctState: [],           //全部状态
        activeName: '0个麦穗',   //当前状态
        registerForm: {      //添加框
          area: '',
          harvestId: '',
        },
        rules: {
          area: [
            {required: true, message: '请输入实际面积单位是平方米', trigger: 'blur'}
          ]
        },
        fileList: []
      }
    },
    computed: {
      //计算当前表格中的数据
      data() {
        return this.albumDatas.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
      },
      ...mapGetters([
        'listOfSongs',      //当前播放列表
        'userId',           //当前登录用户id
      ])
    },
    mounted() {
      this.correctState = correctState;
      this.getDetailsList();
    },

    methods: {
      getDetailsOfNum(state) {
        getModifiedDetailsOfNum(this.userId, state)
          .then(res => {  // 这里返回的是identify-details列表
            this.currentPage = 1;
            this.albumDatas = res.data;
          })
          .catch(err => {
            console.log(err)
          })
      },
      getDetailsList() {
        this.getDetailsOfNum(0);
      },
      notify(title, type) {
        this.$notify({
          title: title,
          type: type
        })
      },
      //获取当前页
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      //todo 根据类型显示对应的记录
      handleChangeView(item) {
        this.activeName = item.name;
        this.albumDatas = [];
        this.getDetailsOfNum(item.type)
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import '../assets/css/singer.scss';
</style>
